<!--  -->
<template>
  <div class="warp">
    <template v-for="(group, index) in typeList">
      <div
        v-if="info.customFormItemMap && info.customFormItemMap[group.id] && info.customFormItemMap[group.id].length"
        class="group"
        :key="index"
      >
        <div class="_header">
          <span style="font-size: 18px; font-weight: bold">{{ group.name }}</span>
        </div>
        <Form :item="info.customFormItemMap[group.id]" :formName="`form_${index}`" :disabled="false"> </Form>
      </div>
    </template>

    <div class="group">
      <div class="_header">
        <span style="font-size: 18px; font-weight: bold">备注</span>
      </div>
      <a-textarea v-model="info.remarks" :rows="4" />
    </div>
    <a-button type="primary" size="large" @click="handleSubmit" class="btn">提交资料</a-button>
  </div>
</template>

<script>
import Form from '@/components/Form'
import { memberInfo, customModuleTypeList, updateMemberInfo, convertFieldValue } from '@/api/member/member'
import { memberPostList } from '@/api/member/memberType'
import { getUserList } from '@/api/system/system'
import { isObject } from 'lodash-es'
import moment from 'moment'

export default {
  components: {
    Form
  },
  data() {
    return {
      id: undefined,
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
      typeList: [],
      typeObj: {},
      postList: [],
      attache_list: [],
      info: {}
    }
  },
  methods: {
    async getData() {
      let res = await memberInfo(this.id)
      this.info = res.data || {}
      let { groupIds } = this.info
      this.info.groupIds = groupIds ? groupIds : []
      await this.getCustomModuleTypeList()
      this.typeList.forEach(type => {
        this.info.customFormItemMap[type.id] = (this.info.customFormItemMap[type.id] || []).map(item => {
          let answerItem = this.info.customFormUserAnswerList.find(f => f.formItemId === item.id)

          let text = convertFieldValue(answerItem, item)
          return {
            ...item,
            isRequired: false,
            content: text
          }
        })
      })
    },
    async getMemberPostList() {
      let res = await memberPostList()
      this.postList = res.rows || []
    },
    async getAttacheList() {
      let res = await getUserList()
      this.attache_list = res.rows || []
    },
    async getCustomModuleTypeList() {
      let res = await customModuleTypeList()
      this.typeList = res.data || []
      this.typeList.forEach(item => {
        this.typeObj[item.id] = item
      })
    },
    async handleSubmit() {
      console.log('handleSubmit--->', this.info)
      const list = Object.keys(this.info.customFormItemMap).reduce((pre, k) => {
        pre = pre.concat(this.info.customFormItemMap[k])
        return pre
      }, [])
      const answerList = []
      for (let index = 0; index < list.length; index++) {
        const item = list[index]
        let answerItem = this.info.customFormUserAnswerList.find(f => f.formItemId === item.id) || {}
        let content = []
        if (Array.isArray(item.content)) {
          content = item.content.map(text => (isObject(text) ? JSON.stringify(text) : text))
          // if (item.itemType === 'UploadFile' || item.itemType === 'ApplyTable')
          //   content = content.map(m => JSON.stringify(m))
        } else if (item.content) {
          if (item.itemType === 'TimePicker') {
            content = [moment(item.content).format('HH:mm')]
          } else {
            content = [item.content.toString()]
          }
        } else if (item.content === 0) {
          content = [item.content]
        }
        if (item.itemType === 'Attachment') {
          continue
        }
        answerList.push({
          customFromId: item.customFromId,
          formStageId: item.formStageId,
          formGroupId: item.formGroupId,
          formItemId: item.id,
          id: answerItem.id,
          content
        })
      }
      let data = {
        ...this.info,
        customFormItemMap: undefined,
        customFormUserAnswerList: undefined,
        customMemberInfoAnswerList: answerList
      }
      console.log('handleSubmit2--->', data)
      let { code, msg } = await updateMemberInfo(data)
      this.$message[code === 0 ? 'success' : 'error'](msg)
      if (code === 0) {
        // this.getMemberInfo()
        this.$emit('reloadMemberInfo')
      }
    }
  },
  async created() {
    this.id = this.$route.query.id
    this.getData()
    // this.id = 1;
    // await this.getCustomModuleTypeList()
    // await this.getMemberInfo()
    this.getMemberPostList()
    this.getAttacheList()
  },
  mounted() {}
}
</script>
<style scoped lang="less" scoped>
.warp {
  // background: #fff;
  .fixed {
    background: #fff;
    padding: 20px;
    border-radius: 20px;
  }

  .btn {
    margin-top: 20px;
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

.group {
  margin-top: 20px;
  padding: 10px;
  border-radius: 20px;
  background: #fff;

  ._header {
    margin: 20px 0;
    margin-left: 20px;
  }
}

.btn-box {
  margin-top: 20px;
  text-align: center;
}
</style>
